<template>
  <div class="home-main">
    <div>
      <div class="el-header">
        <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="/home" @click="$router.push('/home')">首页</el-menu-item>
          <el-menu-item>新零售管理页面</el-menu-item>
        </el-menu>
      </div>
      <div class="el-main">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-card class="box-card">
              <div class="text item">
                <div class="left">
                  <p>总提现金额：260.05元</p>
                  <p>用户提现金额：104元</p>
                  <p>店铺提现金额：156.05元</p>
                </div>
                <div class="right">
                  <p><a href="javascrpit:;" @click="$router.push('/cash-management')">提现管理</a></p>
                  <p><a href="javascrpit:;" @click="$router.push('/spending-details')">平台支出明细</a></p>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="10">
            <el-card class="box-card">
              <div class="text item">
                <div class="left">
                  <p>平台总收益：49382584元</p>
                  <p>店铺订单收益：568元</p>
                  <p>素材收益：365元</p>
                  <p>素材抽佣收益：200元</p>
                  <p>店铺权益收益：888元</p>
                </div>
                <div class="right">
                  <p><a href="javascrpit:;" @click="$router.push('/income-details')">平台收入明细</a></p>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="10">
            <el-card class="box-card">
              <div class="text item">
                <div class="left">
                  <p>待审核店铺：2</p>
                  <p>店铺数量：4</p>
                </div>
                <div class="right">
                  <p><a href="javascrpit:;" @click="$router.push('/storeaudit')">开店审核</a></p>
                  <p><a href="javascrpit:;" @click="$router.push('/storelist')">管理店铺</a></p>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="10">
            <el-card class="box-card">
              <div class="text item">
                <div class="left">
                  <p>订单数量：14</p>
                  <p>订单总金额：584</p>
                  <p>退款/售后率：7%</p>
                  <p>确认退款；率：7%</p>
                </div>
                <div class="right">
                  <p><a href="javascrpit:;" @click="$router.push('/order-list')">查看订单</a></p>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="10">
            <el-card class="box-card">
              <div class="text item">
                <div class="left">
                  <p>平台优惠券发放数量：{{ issued }}张</p>
                  <p>平台优惠券发放金额：{{ getMoney }}元</p>
                </div>
                <div class="right">
                  <p><a href="javascrpit:;" @click="$router.push('/general-couppon')">优惠券管理</a></p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  props: [''],
  data() {
    return {
      couponList: []
    }
  },

  components: {},

  computed: {
    issued() {
      let issued = 0
      this.couponList.map(couponList => {
        if (typeof couponList.total_issued === 'number') {
          issued += couponList.total_issued
        }
      })
      return issued
    },
    getMoney() {
      let getMoney = 0
      this.couponList.map(couponList => {
        if (typeof couponList.getMoney === 'number') {
          getMoney += couponList.getMoney
        }
      })
      return getMoney
    }
  },

  beforeMount() {},

  mounted() {},

  created() {
    this.getCouponList()
  },

  methods: {
    // 获取优惠券数据列表
    async getCouponList() {
      const { data } = await this.$http.get('/general_discount_coupon')
      this.couponList = data
      // console.log(this.couponList)
    }
  },

  watch: {}
}
</script>
<style lang="less" scoped>
.home-main {
  background-color: rgb(248, 247, 247);
  .el-header {
    color: #333;
    padding: 0;
  }
  .el-main {
    padding-left: 60px;
    color: #333;
    text-align: center;
  }
}

.text {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  height: 200px;
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    p {
      margin-bottom: 20px;
      font-size: 16px;
    }
  }
}

.item {
  padding: 18px 0;
}

.box-card {
  // width: 480px;
  margin-bottom: 30px;
}

a {
  color: blue;
}
</style>
